<template>
    <div class="page-content">
        <el-card>

            <!-- 标题区域 begin -->
            <i class="el-icon-s-order" style="margin-bottom:20px"> 设备数量：{{dataTotal}} 台</i>
            <!-- 标题区域 end -->

            <!-- 表格操作条 begin -->
            <TableBar
            :showBottom="true"
            :columns="table_parameters"
            @changeColumn="changeColumn"
            :layout="showButton"
            >
                <el-button 
                slot="bottom" 
                size="small"
                class="el-button el-button--danger el-button--small is-plain"
                @click="showDialog"
                >
                新增
                </el-button>
            </TableBar>
            <!-- 表格操作条 end -->

            <!-- 新增按钮弹窗 begin -->
            <AddDialog :isShowDialog="isShowAddDialog"></AddDialog>
            <!-- 新增按钮弹窗 end -->

            <!-- 表格区域 begin -->
            <DeviceTable
            :table_parameters="table_parameters"
            :tableData="deviceData"
            >
            </DeviceTable>
            <!-- 表格区域 end -->

            <!-- 分页组件 begin -->
            <el-pagination
            style="margin-top:10px"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            :current-page="getMonitor_parameter.page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="getMonitor_parameter.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="dataTotal">
            </el-pagination>
            <!-- 分页组件 end  -->
        </el-card>
    </div>
</template>

<script>

// API 
import {
    getMonitor
} from '../../../Api/leadership/Monitoring'

// Components 
import TableBar from '../../common/TableBar.vue'                  // 表格操作条
import AddDialog from './DeviceSettingCompo/AddDialog.vue'        // 新增按钮弹窗  
import DeviceTable from './DeviceSettingCompo/DeviceTable.vue'    // 数据表格

export default {

    name: 'Setting',

    components: { 
        DeviceTable, 
        TableBar,
        AddDialog 
    },
    
    data() {
        return {
            
            // 控制 tableBar 组件所要展示的按钮
            showButton: ["refresh", "column"],

            // 数据总数
            dataTotal: 0,

            // 控制新增按钮弹窗
            isShowAddDialog: {
                value: false
            },

            // 调用获取设备接口参数
            getMonitor_parameter: {
                page: 1,
                size: 5
            },

            // 表格参数 prop、name(就是 label 配合 TableBar 组件才改成 name)、show (控制列是否展示)
            table_parameters: [
                {
                    prop: "baseId",
                    name: "基地编号",
                    show: true
                },
                {
                    prop: "createBy",
                    name: "创建者",
                    show: false
                },
                {
                    prop: "baseName",
                    name: "基地名称",
                    show: true
                },
                {
                    prop: "deviceSerial",
                    name: "设备序列号",
                    show: true
                },
                {
                    prop: "monitoringLocation",
                    name: "摄像头监控位置",
                    show: true
                },
                {
                    prop: "validateCode",
                    name: "设备验证码",
                    show: false
                },
                {
                    prop: "createDate",
                    name: "创建时间",
                    show: false
                }
            ],
        }
    },

    computed: {

        // 从 vuex 中 deviceCenter 模块获取 deviceData 
        deviceData: function() {
            return this.$store.state.deviceCenter.deviceData      
        }
    },

    created() {

        // 获取摄像头信息
        this.getData(this.getMonitor_parameter)
    },

    methods: {

        // 显示数据数改变
        handleSizeChange(size) {
            this.getMonitor_parameter.size = size

            this.getData(this.getMonitor_parameter)
        },

        // 页数改变
        handlePageChange(page) {
            this.getMonitor_parameter.page = page

            this.getData(this.getMonitor_parameter)
        },

        // 新增按钮弹窗
        showDialog() {
            this.isShowAddDialog.value = true
        },

        // 获取设备信息
        getData(getMonitor_parameter) {

            getMonitor(getMonitor_parameter).then(res => {
                console.log(res);

                if (res.data.flag) {
                    const {records : data} =  res.data.data
                    
                    this.dataTotal = res.data.data.total

                    this.$store.commit("deviceCenter/mutationDeviceData", data)
                }
            })
        },

        // 列改变时 TableBar 组件传递列信息
        changeColumn(columns) {
            console.log(columns);
            this.table_parameters = columns
            console.log(this.table_parameters,66);
        }
    }
}
</script>